@media

Internet Explorer			Netscape		Opera			Safari			Firefox
6.0	7.0	8.0	8.0	9.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Так	Так	Так	Так	Так	Так	Так	Так	Так	Так	Так	Так	Так	Так

Коротка інформація

CSS	CSS2
Значення за умовчанням	all
Посилання на специфікацію	http://www.w 3.org/TR/CSS21/cascade.html#at - import

Опис

Правило @media дозволяє вказати тип носія, для якого застосовуватиметься вказаний стиль. Типами виступають різні пристрої, наприклад, принтер, КПК, монітор та ін. В таблиці. 1 перераховані деякі з них.

Таблиця. 1. Типи носіїв і їх опис
Тип	Опис
all	Усі типи. Це значення використовується за умовчанням.
aural	Мовні синтезатори, а також програми для відтворення тексту вголос. Сюди, наприклад, можна віднести мовні браузери.
braille	Пристрої, засновані на системі Брайля, які призначені для сліпих людей.
handheld	Наладонные комп'ютери і аналогічні ним апарати.
print	Друкуючі пристрої на зразок принтера.
projection	Проектор.
screen	Екран монітора.
tv	Телевізор.

Синтаксис

@media тип1 [, тип2] {Опис стилю }

Значення

Після ключового слова @media йде один або декілька типів носія, перерахованих в таблиці. 1; якщо їх більше одного, то вони розділяються між собою комі. Після чого слідують обов'язкові фігурні дужки, усередині яких йде звичайний опис стильових правил.

Приклад 1

HTML 4.01CSS 2.1IE 6IE 7IE 8Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

<head>

<title>@media</title>

@media screen { /* Стиль для відображення у браузері */

BODY {

font - family: Arial, Verdana, sans - serif; /* Рубаний шрифт */

font - size: 90%; /* Розмір шрифту */

color: #000080; /* Колір тексту */

}

H1 {

background: #faf0e6; /* Колір фону під текстом */

border: 2px dashed #800000; /* Рамка навколо заголовка */

color: #a0522d; /* Колір тексту */

padding: 7px; /* Полів навколо тексту */

}

H2 {

color: #556b2f; /* Колір тексту */

margin: 0; /* Прибираємо відступи */

}

P {

margin - top: 0.5em; /* Відступ згори */

}

@media print { /* Стиль для друку */

BODY {

font - family: Times, 'Times New Roman ', serif; /* Шрифт із зарубками */

}

H1, H2, P {

color: #000; /* Чорний колір тексту */

}

</style>

</head>

<body>

<h1>Метод лову лева в пустелі</h1>

<h2>Метод послідовного перебору</h2>

<p>Нехай лев має габаритні розміри LxWxH, де L - довжина лева від кінчика носа

до пензлика хвоста, W - ширина лева, а H - його висота. Після чого пустелю розбиваємо на

ряд елементарних прямокутників, розмір яких співпадає з шириною і завдовжки лева.

Враховуючи, що лев може знаходитися не строго на заданій ділянці, а одночасно на

двох з них, клітину для лову слід робити підвищеній площі, а саме 2Lx2W.

Завдяки цьому ми уникнемо помилки, коли в клітині виявиться спійманим лише половина

лева або, що гірше, тільки його хвіст.</p>

<p>Далі послідовно накриваємо кожного з розмічених прямокутників пустелі

клітиною і перевіряємо, спійманий лев або ні. Як тільки лев опиниться в клітині, процедура

упіймання вважається завершеною.</p>

</body>

</html>

У цьому прикладі вводиться два стилі - один для зміни виду елементів при їх звичайному відображенні у браузері, а другий - при виведенні сторінки на друк. При цьому вигляд документу для різних носіїв може сильно розрізнятися між собою, наприклад, як це показано на мал. 1 і мал. 2.

Мал. 1. Сторінка для відображення у вікні браузеру

Мал. 2. Сторінка, призначена для друку

Проглянути документ, у якого CSS встановлений як тип print можна, якщо роздрукувати певну сторінку. Чи піти на хитрість і тимчасово замінити слово print на screen, щоб відобразити підсумок у браузері. Саме так був отриманий мал. 2.

Команда @media застосовується в основному для формування одного стильового файлу, який розбитий на блоки за типом пристроїв. Іноді ж має сенс створити декілька різних CSS -файлов - один для друку, інший для відображення у браузері - і підключати їх до документу в міру необхідності. У подібному випадку слід скористатися тегом <LINK> з параметром media, значенням якого виступають ті ж типи, перераховані в таблиці. 1.

Приклад 2